<template>
  <div class="login-container1">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules"  :inline="true" ref="loginForm" label-position="left" label-width="120px">
      <div class="login-logo">
          <img src="../../assets/images/loginlogo.png" class="imgS"/>
      </div>
      <div class="login-con">
        <div class='yanzheng errInfo'>
                <span v-if='state==1' style='text-align:center;'>登录账号没有绑定手机号，请重新输入。</span>
                <span v-if='state==2'>用户信息填写有误，请重新输入。</span>
                <span v-if='state==3'>验证码错误，请重试。</span>
        </div>
        <el-form-item prop="tenantName" label="机构编码" >
            <el-input class='wd210' name="tenantName" type="text" v-model='loginForm.tenantName' autoComplete="on" placeholder="" size="mini" />
        </el-form-item>
        <el-form-item prop="userName" label="登录账号" >
            <el-input class='wd210' name="userName" type="text" v-model='loginForm.userName' autoComplete="on" placeholder="" size="mini" />
        </el-form-item>
        <el-form-item prop="passWord" label="新密码"  >
            <el-input class='wd210' v-model='loginForm.passWord' name="passWord" type="password"  autoComplete="on" placeholder="" size="mini" />
             <!-- <p  style="color: #999999;font-size: 12px; margin:0;">6-18位数的新密码（允许数字和字母）</p> -->
        </el-form-item>
        
        <el-form-item prop="repassWord" label="重新输入新密码">
            <el-input class='wd210' name="repassWord" type="password" v-model='loginForm.repassWord' autoComplete="on" placeholder="" size="mini" />
        </el-form-item>
        <el-form-item label="短信验证码"  prop='code'>
            <el-input class='wd100 verification' size='mini' v-model='loginForm.code'></el-input>
            <el-button :disabled="show2" size='mini' class='getVerfition' @click='getcodes'>
              <span v-show="show" >获取验证码</span>
              <span v-show="!show" class="count">{{count}} s</span>
            </el-button>
         <!--    <div style='color: #999' v-if='getcode'>您的账号{{loginForm.userName}}密码正在修改,非本人操作勿理。</div> -->
        </el-form-item>  
        <el-form-item class='subBtn'>
                   <!--  <el-button type="info"  size='small' @click='determine'>取消</el-button> -->
                    <el-button type="primary" class='save' size='small' @click="saveData('loginForm')">保存</el-button>

                    <span class="denglu" @click='denglu2'>去登录</span>
                    <el-dialog title="提示" :visible.sync="dialog" width="30%" center :modal=false>
                      <span>您确认修改账号{{loginForm.userName}}的密码吗？</span>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="DialogVisible= true">取 消</el-button>
                        <el-button type="primary" @click="determine2">确 定</el-button>
                      </span>
                    </el-dialog>
                    <el-dialog title="提示" :visible.sync="DialogVisible" width="30%" center :modal=false>
                      <span>您确认取消本次修改吗？</span>
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="determine" :loading="loading">确 定</el-button>
                      </span>
                    </el-dialog>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
const TIME_COUNT = 60;
export default {
  data() {
    var oldpas2 = (rule, value, callback) => {
      var regx = /^[a-zA-Z0-9]{6,18}$/;
      if (!regx.test(value)) {
        callback(new Error("请输入6-18位数的新密码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
        //this.show2=true
      } else {
        // if (this.loginForm.repassWord != "") {
        //   this.$refs.loginForm.validateField("repassWord");
        // } else {
        // }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.passWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      show: true,
      getcode: false,
      securitycode: "",
      tenantId: "",
      DialogVisible: false,
      show2: false,
      count: "",
      dialog: false,
      // loginAccount:false,
      getcode: false,
      loginForm: {
        userName: "",
        code: "",
        tenantName: ""
      },
      loginRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入登录账号"
          }
        ],
        tenantName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入机构编码"
          }
        ],
        passWord: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码"
          },
          { validator: validatePass, trigger: "blur" },
          { validator: oldpas2, trigger: "blur" }
        ],
        repassWord: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { validator: validatePass2, trigger: "blur" }
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }
        ]
      },
      state: 0
    };
  },
  created() {},
  methods: {
    getcodes() {
      let params = {
        userName: this.loginForm.userName,
        tenantName: this.loginForm.tenantName
      };
      this.post(params, "services/RetrievePwdSendCode").then(rs => {
        if (rs.success) {
          // this.loginAccount=false;
          this.state = 0;
          this.getcode = true;
          this.securitycode = rs.result.securityCode;
          this.tenantId = rs.result.tenantId;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.show2 = true;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                this.show2 = false;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.state = rs.error.code;
        }
      });
    },
    getVerfition() {
      this.loading = true;
      let params = {
        tenantId: this.tenantId,
        userName: this.loginForm.userName,
        code: this.loginForm.code,
        securityCode: this.securitycode,
        passWord: this.loginForm.passWord
      };
      this.post(params, "services/RetrievePassword").then(rs => {
        this.loading = false;
        if (rs.success) {
          this.state = 0;
          this.$router.push({
            path: "/login"
          });
        } else {
          this.state = rs.error.code;
        }
      });
    },
    saveData(loginForm) {
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          // this.loading = true;
          let a = "您确认修改" + this.loginForm.userName + "账号的密码吗？";
          this.$confirm(a)
            .then(_ => {
              //    this.loading = false;
              this.getVerfition();
            })
            .catch(_ => {
              // this.loading = false;
              // this.$router.push({
              // path:'login',
              // })
              //     this.$confirm('您确认取消本次修改吗？')
              //       .then(_ => {
              //     this.$router.push({
              //     path:'login',
              // })
              //       })
              //   .catch(_ => {
              //     this.$router.push({
              //     path:'login',
              // })
              //   });
            });
        }
      });
    },
    denglu2() {
      this.$router.push({
        path: "login"
      });
    },
    determine2() {
      this.$router.push({
        path: "login"
      });
    },
    determine() {
      this.$router.push({
        path: "login"
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.ht28 {
  height: 20px;
}
.wd210 {
  width: 210px;
}
.wd100 {
  width: 100px;
}
.login-container1 {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    width: 400px;
    height: 440px;
    background: #ffffff;
    border-radius: 15px;
    top: 50%;
    margin-top: -230px;
    left: 50%;
    margin-left: -200px;
    .login-logo {
      height: 92px;
      text-align: center;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom: 1px solid #cbd1d3;
      .imgS {
        width: 200px;
        margin: 20px;
      }
    }
    .login-con {
      padding: 0 30px 40px 30px;
      .yanzheng {
        margin-left: 116px;
        color: #cf1322;
        margin-bottom: 8px;
      }
      .errInfo {
        line-height: 18px;
        width: 221px;
        margin: 10px 0 13px 117px;
        height: 18px;
      }
      .setC {
        font-size: 13px;
        color: #cf1322;
        margin: 0 0 13px 76px;
      }
      .getVerfition {
        margin-left: 7px;
      }
      .time5 {
        margin-left: 76px;
        width: 250px;
      }
      .subBtn {
        margin: 0 0 0 76px;
        .wd150 {
          width: 150px;
        }
        .denglu {
          margin-left: 37px;
          color: #027dca;
          cursor: pointer;
        }
        .save {
          margin-left: 48px;
        }
        .forgetPwd {
          font-size: 12px;
          color: #027dca;
          margin-left: 36px;
          cursor: pointer;
        }
      }
    }
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
}
.el-form--inline .el-form-item__label {
  line-height: 28px;
  vertical-align: top;
}
.el-form-item.is-required .el-form-item__label:before {
  content: "";
}
</style>

